import './style/info.css'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { Form, Button, Input, DatetimePicker, NavBar, Radio } from 'react-vant'
const InfoPage: React.FC = () => {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const [status, setStatus] = useState(false); // 初始值设置为 false
    const [formValues, setFormValues] = useState({
        first_name: "",
        last_name: "",
        birthday: "",
        sex: "",
    })
    const onValuesChange = (values: any) => {
        setFormValues({ ...formValues, ...values })
        console.log(values, '1')
    }
    const onFinish = (values: any) => {
        const date = values.birthday;
        console.log(date, '11111');
        if (!date) return
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 补零处理，如 01
        const day = date.getDate().toString().padStart(2, '0'); // 如 05
        const formattedBirthday = `${year}-${month}-${day}`; // 结果："2025-05-22"

        navigate('/mytell')
        console.log('格式化后的数据：', { ...values, birthday: formattedBirthday });

    }
    return (
        <>
            <div className="yanzheng-box">
                <NavBar
                    title="个人信息"
                    onClickLeft={() => {
                        navigate('/newuser')
                    }}
                />
                <Form
                    colon
                    form={form}
                    onFinish={onFinish}
                    onValuesChange={onValuesChange}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button 
                            round 
                            nativeType='submit' 
                            type='primary' 
                            block
                            disabled={!status}
                            >
                                继续
                            </Button>
                        </div>
                    }
                >
                    <span className="parentBox-span">名</span>
                    <Form.Item
                        name='first_name'
                        rules={[{ required: true, message: '请输入名字' }]}
                    >
                        <Input className="parentBox-input" />
                    </Form.Item>

                    <span className="parentBox-span">姓氏</span>
                    <Form.Item
                        name='last_name'
                        rules={[{ required: true, message: '请输入姓氏' }]}
                    >
                        <Input className="parentBox-input" />
                    </Form.Item>

                    <span className="parentBox-span">生日</span>
                    <Form.Item
                        name='birthday'
                        rules={[{ required: true, message: '请输入生日' }]}
                    >
                        <DatetimePicker
                            title='选择年月日'
                            type='date'
                            minDate={new Date(2020, 0, 1)}
                            maxDate={new Date(2025, 10, 1)}
                        />
                    </Form.Item>
                    <span className="parentBox-span">性别</span>
                    <Form.Item
                        name='sex'
                        rules={[{ required: true, message: '请输入性别' }]}
                    >
                        <Input className="parentBox-input" />
                    </Form.Item>
                    <span className="parentBox-span1">
                        <input type="checkbox" checked={status} onChange={() => setStatus(!status)} />
                        我已阅读并接受 A护肤 使用条款和隐私政策
                    </span>
                </Form>
            </div>

        </>
    )
}
export default InfoPage